{% extends "documents/document_upload_base.html" %}
{% load static %}
{% load bootstrap_tags %}
{% load i18n %}
{% load client_lib_tags %}

{% block title %} {% trans "Upload Document's Thumbnail" %} - {{ block.super }} {% endblock %}

{% block body_class %}data documents upload{% endblock body_class %}

{% block body_outer %}
  <div class="page-header">
    <a href="{% document_list_url %}" class="btn btn-primary pull-right">{% trans "Explore Documents" %}</a>
    <h2 class="page-title">{% trans "Upload Document's Thumbnail" %}</h2>
  </div>

  <div class="row">
    {% block body %}
    <div class="col-md-8">
        {% block additional_info %}{% endblock %}

        {% if errors %}
        <div id="errors" class="alert alert-danger">
          {% for error in errors %}
          <p>{{ error }}</p>
          {% endfor %}
        </div>
        {% endif %}

        <div id="upload-status"></div>

        <section id="drop-zone">
          <h3><i class="fa fa-cloud-upload"></i><br />{% trans "Drop files here" %}</h3>
        </section>

        <p>{% trans " or select them one by one:" %}</p>

        <form id="file-uploader" method="post" enctype="multipart/form-data">
            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
            <!-- UI change to hide the list of previously uploaded files from the user -->
            <input type="file" id="file-input" style="display: none;" multiple>
            <input class="btn btn-default" type="button" value="{% trans "Choose Files" %}" onclick="document.getElementById('file-input').click();">
        </form>

        <section class="widget">
          <ul id="global-errors"></ul>
          <h4>{% trans "Files to be uploaded" %}</h4>
          <div id="file-queue"></div>
          <div class="checkbox" style="display:none;" id="style_upload_form_check">
              {% trans "Is Upload Metadata XML Form" %} <input type="checkbox" name="style_upload_form" id="id_style_upload_form" checked="true"/>
              <input type="text" name="dataset_title" id="id_dataset_title" value="{{ resource.alternate }}"/>
          </div>
        </section>

        <section>
          <a href="{% url "document_thumb_upload" resource.id %}" id="clear-button" class="btn btn-default">{% trans "Clear" %}</a>
          <a href="#" id="upload-button" class="btn btn-primary">{% trans "Upload files" %}</a>
        </section>
        </div>

        {% endblock %}
    </div>
</div>
{% endblock body_outer %}

{% block extra_script %}
    {{ block.super }}
    <script data-main="{% static 'geonode/js/upload/main.js' %}"
      src="{% static 'lib/js/require.js' %}">
    </script>
    <script type="text/javascript">
    {% autoescape off %}
      csrf_token =  "{{ csrf_token }}",
      form_target = "{% url "document_thumb_upload" docid=resource.id %}",
      time_enabled = false,
      mosaic_enabled = false,
      userLookup = "{% url "account_ajax_lookup" %}"
    {% endautoescape %}
    </script>

    <script type="text/javascript">
        $('#id_doc_file').on('change', function(){
            if($('#id_title').val() == ''){
                $('#id_title').val($('#id_doc_file').val().replace("C:\\fakepath\\", ""));
            }
        });
        $("#id_links").select2({
            width: '100%'
        });
        $('#upload_form').submit(function(){
          $('#permissions').val(JSON.stringify(permissionsString($('#permission_form'),'base')));
        });
    </script>
{% endblock extra_script %}
